<template>
  <div class="bg">
    <WinPrize v-show="showWinPrize" :gift="gift" :prizeGrade="prizeGrade" @close="close"></WinPrize>
    <div class="header">
      <div style="margin: 0 auto">
        <img src="../assets/title.png"><img style="width: 100px;height: auto;float: left" src="../assets/抽奖2.gif">
      </div>
    </div>

    <div class="randomDraw">
      <img src="../assets/left.png">
      <span class="prize">{{ prizeName }}</span>
      <div class="btn1" @click="choujiang">{{ start }}</div>
    </div>

    <BackToLogin></BackToLogin>
  </div>
</template>

<script>
  import WinPrize from "@/components/WinPrize";
  import BackToLogin from "@/components/BackToLogin";

  export default {
    name: "RandomDraw",
    components: {
      WinPrize,
      BackToLogin,
    },
    data() {
      return {
        prizeList: [
          {prizeGrade: "特等奖", gift: "华为手机", number: 1},
          {prizeGrade: "一等奖", gift: "华为手表", number: 2},
          {prizeGrade: "二等奖", gift: "小米手环", number: 5},
          {prizeGrade: "三等奖", gift: "电动牙刷", number: 10},
        ],

        // WinPrize
        showWinPrize: false,
        prizeGrade: "",
        gift: "",

        // RandomDraw
        prizeName: '一等奖',
        prizeIndex: 0,
        prizeNameList: ["特等奖", "一等奖", "二等奖", "三等奖"],
        start: "开始抽奖",
        startFlag: true,
        timeId: 0,

        // 中奖记录
        winRecord: []
      }
    },

    methods: {
      choujiang() {
        if (this.startFlag) {
          // 点击开始抽奖
          if (this.prizeList.length === 0) {
            alert("奖品已全部抽完。");
            return;
          }
          this.startFlag = false;
          this.start = "停止抽奖"
          this.timeId = setInterval(() => {
            this.prizeName = this.prizeNameList[this.prizeIndex];
            this.prizeIndex += 1;
            if (this.prizeIndex > 3) {
              this.prizeIndex = 0;
            }
          }, 100)

        } else {
          // 点击停止抽奖
          this.start = "开始抽奖";
          this.startFlag = true;
          const randomNumber = Math.floor(Math.random() * this.prizeList.length);

          const item = this.prizeList[randomNumber];
          if (item.number - 1 > 0) {
            item.number -= 1;
          } else {
            this.prizeList.splice(randomNumber, 1);
          }

          this.prizeGrade = item.prizeGrade;
          this.gift = item.gift;
          this.showWinPrize = true;

          this.prizeName = this.prizeNameList[randomNumber];
          clearInterval(this.timeId);

          // 将中奖记录存入winPrize，如果没有记录，新建一个
          this.winRecord = JSON.parse(localStorage.getItem('winRecord'));

          this.winRecord.push({
            id: "用户" + (new Date()).getTime(),
            prizeGrade: this.prizeGrade,
            gift: this.gift,

          })
          const jsonData = JSON.stringify(this.winRecord);
          localStorage.setItem('winRecord', jsonData);
        }
      },

      close(showWinPrize) {
        this.showWinPrize = showWinPrize;
      },

      getPrizeList() {
        fetch("http://localhost:9090/getPrizeList").then(response => {
          response.json().then(data => {
            console.log(data);
            this.prizeList = data;
          })
        }).catch(err => {
          console.log(err);
        })
      },
    },

    //  加载时执行
    created(){
      this.getPrizeList();
    }
  }
</script>

<style scoped>
  .bg {
    position: relative;
  }

  .prize {
    font-size: 5rem;
    color: #f8f572;
    position: absolute;
    left: 445px;
    top: 420px;
  }

  .btn1 {
    position: absolute;
    bottom: 30px;
    left: 480px;
    display: inline-block;
    padding: 5px 30px;
    font-size: 24px;
    font-weight: 600;
    color: #fff;
    background-color: #ff5500;
    border: none;
    border-radius: 1.25rem;
    box-shadow: 1px 5px #bababa;
  }

  .btn1:hover {
    background-color: #ff5500;
  }

  .btn1:active {
    background-color: #ff5500;;
    box-shadow: 0 5px #d0d0d0;
    transform: translateY(6px);
  }
</style>